import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 40.h,
          decoration: BoxDecoration(
            color: Colors.grey[200],
            borderRadius: BorderRadius.all(Radius.circular(8.w)),
          ),
          margin: EdgeInsets.all(10.w),
          child: Row(
            children: [
              Padding(padding: EdgeInsets.all(8.w), child: Icon(Icons.search)),
              Expanded(
                child: SizedBox(
                  child: Swiper(
                    indicatorLayout: PageIndicatorLayout.NONE,
                    autoplay: true,
                    itemCount: 5,
                    scrollDirection: Axis.vertical,
                    itemBuilder: (context, index) {
                      return Container(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          "搜索建议 $index",
                          style: TextStyle(fontSize: 14.sp),
                        ),
                      );
                    },
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.symmetric(vertical: 6.h, horizontal: 8.w),
                child: TextButton(
                  onPressed: () {
                    print("点击搜索");
                  },
                  style: ButtonStyle(
                    backgroundColor: WidgetStateProperty.all(Colors.grey),
                    shape: WidgetStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8.w),
                      ),
                    ),
                    padding: WidgetStateProperty.all(EdgeInsets.zero),
                  ),
                  child: Text(
                    "搜索",
                    style: TextStyle(color: Colors.white, fontSize: 14.sp),
                  ),
                ),
              ),
            ],
          ),
        ),
        SizedBox(
          height: 20.h, // 设置一个固定高度
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: 20,
            itemExtent: 50.0,
            itemBuilder: (BuildContext context, int index) {
              return Text("item$index");
            },
          ),
        ),
        Expanded(
          child: CustomScrollView(
            slivers: [
              SliverGrid(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 5,
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                ),
                delegate: SliverChildBuilderDelegate((
                  BuildContext context,
                  int index,
                ) {
                  return Card(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.category, size: 30.sp),
                        Text("分类 $index"),
                      ],
                    ),
                  );
                }, childCount: 10),
              ),

              SliverMasonryGrid.count(
                crossAxisCount: 2,
                mainAxisSpacing: 4,
                crossAxisSpacing: 4,
                itemBuilder: (context, index) {
                  return Container(
                    height: (index % 5 + 1) * 100,
                    color: Colors.red,
                  );
                },
                childCount: 50,
              ),
            ],
          ),
        ),
      ],
    );
  }
}
